<template>
  <el-container>
    <el-header class="header" v-if="isLogged">
      <span class="title">PIMS4CDAPP</span>
      <el-button style="color: #303133; font-weight: bold" type="primary" icon="el-icon-menu" size="medium" circle v-if="viewSize.width <= viewSize.threshold" @click="drawer = true"></el-button>
      <el-drawer v-if="viewSize.width <= viewSize.threshold" :size="200" :visible.sync="drawer" :with-header="false" :modal-append-to-body="false" custom-class="navigation-drawer">
        <div>
          <div class="title" style="padding-top: 40px; padding-bottom: 20px">
            PIMS4CDAPP
          </div>
          <navigationMenu mode="vertical" @select="drawer = false" />
        </div>
      </el-drawer>
      <navigationMenu v-if="viewSize.width > viewSize.threshold" mode="horizontal" />
    </el-header>
    <el-main class="container">
      <transition name="el-fade-in">
        <router-view />
      </transition>
    </el-main>
    <el-backtop target=".container">
      <i class="el-icon-caret-top"></i>
    </el-backtop>
    <loadingView v-show="isLoading" />
  </el-container>
</template>

<script>
  import loadingView from "@/views/maskView/loadingView.vue";
  import navigationMenu from "./navigationMenu.vue";
  export default {
    name: "containerView",
    components: {
      navigationMenu,
      loadingView,
    },
    data() {
      return {
        threshold: 900,
        drawer: false,
      };
    },
    computed: {
      viewSize() {
        return this.$store.state.viewSize;
      },
      isLogged() {
        return this.$store.getters.isLogged;
      },
      isLoading() {
        return this.$store.state.isLoading;
      },
    },
    created() {
      const that = this;
      if (this.isDev) this.$store.commit("setDev");
      if (!this.$store.getters.isLogged) {
        this.$router.push("/login").catch((err) => {
          if (this.isDev) window.console.log(err);
        });
      }
      this.$store.commit("setViewSize", {
        width: document.body.offsetWidth,
        height: document.body.offsetHeight,
        threshold: this.threshold,
      });
      window.onresize = () => {
        that.$store.commit("setViewSize", {
          width: document.body.offsetWidth,
          height: document.body.offsetHeight,
          threshold: that.threshold,
        });
        console.log(that.viewSize);
      };
      this.$store.dispatch("loadVerifyData");
      this.$store.dispatch("getOperateLog");
      // setInterval(() => {
      //   that.$store.dispatch("loadVerifyData");
      //   that.$store.dispatch("getOperateLog");
      // }, 30000);
    },
  };
</script>

<style scoped>
  .title {
    text-align: center;
    font-size: 1.5em;
    font-weight: bold;
    color: #409eff;
  }

  .container {
    position: absolute;
    z-index: 1;
    top: 60px;
    left: 0;
    right: 0;
    bottom: 0;
    padding-top: 50px;
    padding-bottom: 100px;
  }

  .header {
    position: absolute;
    z-index: 99;
    top: 0;
    left: 0;
    right: 0;
    height: 60px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    /* background-color: #fff; */
    background-color: #303133;
    /* border-bottom: solid 1px #ddd; */
    border: none;
  }

  /* .breath {
  animation-timing-function: ease-in-out;
  animation-name: breath;
  animation-duration: 3000ms;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}
@keyframes breath {
  0% {
    color: #aaa;
    opacity: 0.25;
    text-shadow: 0 0px 10px rgba(0, 0, 0, 1);
  }
  100% {
    color: #409eff;
    opacity: 1;
    text-shadow: 0 0px 30px rgba(48, 192, 255, 1);
  }
} */
</style>

<style>
  @import "./overallStyles.css";
</style>